<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title>Vite App</title>
  <link rel="stylesheet" href="sdk/sdk.css" />
  <link rel="stylesheet" href="sdk/helper.css" />
  <link rel="stylesheet" href="sdk/iconfont.css" />
  <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
  <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
  <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
  <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
  <style>
    html,
    body,
    .app-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <div id="root" class="app-wrapper"></div>

  <script type="module" src="/main.js"></script>
  <script src="sdk/sdk.js"></script>
  <script type="text/javascript">
    (function () {
      let amis = amisRequire('amis/embed');
      // 通过替换下面这个配置来生成不同页面
      let amisJSON = {
        type: 'page',
        title: '表单页面',
        "initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData",
        "toolbar": [
          {
            "type": "form",
            "panelClassName": "mb-0",
            "title": "",
            "body": [
              {
                "type": "select",
                "label": "报表名称",
                "name": "businessLineId",
                "selectFirst": true,
                "mode": "inline",
                "options": [
                  "北京",
                  "上海"
                ],
                "checkAll": false
              },
              {
                "label": "时间范围",
                "type": "input-date-range",
                "name": "dateRange",
                "inline": true,
                "value": "-1month,+0month",
                "inputFormat": "YYYY-MM-DD",
                "format": "YYYY-MM-DD",
                "closeOnSelect": true,
                "clearable": false
              }
            ],
            "actions": [],
            "mode": "inline",
            "target": "mainPage",
            "submitOnChange": true,
            "submitOnInit": true
          }
        ],
        body: {
          type: "crud",
          draggable: true,
          api: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample",

          keepItemSelectionOnPageChange: true,
          autoGenerateFilter: true,
          bulkActions: [
            {
              type: "button",
              label: "批量删除",
              actionType: "ajax",
              api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}",
              confirmText: "确定要批量删除?",
            },
            {
              type: "button",
              label: "批量修改",
              actionType: "dialog",
              dialog: {
                title: "批量编辑",
                name: "sample-bulk-edit",
                body: {
                  type: "form",
                  api: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate2",
                  body: [
                    {
                      type: "hidden",
                      name: "ids",
                    },
                    {
                      type: "input-text",
                      name: "engine",
                      label: "Engine",
                    },
                  ],
                },
              },
            },
          ],
          quickSaveApi:
            "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate",
          quickSaveItemApi:
            "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id",
          headerToolbar: [
            "bulkActions",
            {
              type: "button",
              label: "重置测试数据${date}",
              actionType: "ajax",
              size: "sm",
              api: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/reset",
            },
            "export-excel",
            {
              type: "tpl",
              tpl: "一共有 ${count} 行数据。",
              className: "v-middle",
            },
            {
              type: "columns-toggler",
              align: "right",
              draggable: true,
            },
            {
              type: "drag-toggler",
              align: "right",
            },
          ],
          footerToolbar: ["statistics", "switch-per-page", "pagination"],
          columns: [
            {
              name: "id",
              label: "ID",
              width: 20,
              sortable: true,
              type: "text",
              searchable: {
                type: "input-text",
                name: "id",
                label: "主键",
                placeholder: "输入id",
              },
            },
            {
              name: "browser",
              label: "Browser",
              searchable: {
                type: "select",
                name: "browser",
                label: "浏览器",
                placeholder: "选择浏览器",
                options: [
                  {
                    label: "Internet Explorer ",
                    value: "ie",
                  },
                  {
                    label: "AOL browser",
                    value: "aol",
                  },
                  {
                    label: "Firefox",
                    value: "firefox",
                  },
                ],
              },
            },
            {
              name: "platform",
              label: "平台",
              popOver: {
                trigger: "hover",
                body: {
                  type: "tpl",
                  tpl: "就是为了演示有个叫 popOver 的功能",
                },
              },
              sortable: true,
              type: "text",
            },
            {
              name: "grade",
              label: "CSS 等级",
              type: "select",
              options: ["A", "B", "C", "D", "X"],
            },
            {
              type: "operation",
              label: "操作",
              width: 100,
              buttons: [
                {
                  type: "button",
                  actionType: "ajax",
                  label: "删除",
                  confirmText: "您确认要删除?",
                  api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id",
                },
              ],
            },
          ],

        }
      };
      let amisScoped = amis.embed('#root', amisJSON, {
        data: {
          myData: '傳入數據'
        },
        context: {
          amisUser: {
            id: 1,
            name: 'test user'
          }
        }
      });
    })();
  </script>
</body>

</html>
